<template>
  <view class="notifications-page">
    <!-- 通知设置 -->
    <view class="settings-section">
      <view class="section-title">通知设置</view>
      <view class="setting-list">
        <view class="setting-item">
          <view class="setting-info">
            <text class="setting-title">推送通知</text>
            <text class="setting-desc">接收重要消息推送</text>
          </view>
          <switch :checked="settings.pushNotification" @change="onPushNotificationChange" />
        </view>
        
        <view class="setting-item">
          <view class="setting-info">
            <text class="setting-title">声音提醒</text>
            <text class="setting-desc">收到消息时播放提示音</text>
          </view>
          <switch :checked="settings.soundAlert" @change="onSoundAlertChange" />
        </view>
        
        <view class="setting-item">
          <view class="setting-info">
            <text class="setting-title">震动提醒</text>
            <text class="setting-desc">收到消息时震动提醒</text>
          </view>
          <switch :checked="settings.vibrationAlert" @change="onVibrationAlertChange" />
        </view>
      </view>
    </view>

    <!-- 消息分类 -->
    <view class="category-section">
      <view class="section-title">消息分类</view>
      <view class="category-list">
        <view class="category-item" @click="goToCategoryMessages('system')">
          <view class="category-icon system">
            <u-icon name="setting" size="20" color="#1976d2"></u-icon>
          </view>
          <view class="category-info">
            <text class="category-title">系统通知</text>
            <text class="category-desc">{{ systemCount }}条未读消息</text>
          </view>
          <view class="category-arrow">
            <u-icon name="arrow-right" size="16" color="#ccc"></u-icon>
          </view>
        </view>
        
        <view class="category-item" @click="goToCategoryMessages('property')">
          <view class="category-icon property">
            <u-icon name="home" size="20" color="#388e3c"></u-icon>
          </view>
          <view class="category-info">
            <text class="category-title">物业通知</text>
            <text class="category-desc">{{ propertyCount }}条未读消息</text>
          </view>
          <view class="category-arrow">
            <u-icon name="arrow-right" size="16" color="#ccc"></u-icon>
          </view>
        </view>
        
        <view class="category-item" @click="goToCategoryMessages('payment')">
          <view class="category-icon payment">
            <u-icon name="rmb-circle" size="20" color="#f57c00"></u-icon>
          </view>
          <view class="category-info">
            <text class="category-title">缴费提醒</text>
            <text class="category-desc">{{ paymentCount }}条未读消息</text>
          </view>
          <view class="category-arrow">
            <u-icon name="arrow-right" size="16" color="#ccc"></u-icon>
          </view>
        </view>
        
        <view class="category-item" @click="goToCategoryMessages('security')">
          <view class="category-icon security">
            <u-icon name="shield" size="20" color="#c2185b"></u-icon>
          </view>
          <view class="category-info">
            <text class="category-title">安全提醒</text>
            <text class="category-desc">{{ securityCount }}条未读消息</text>
          </view>
          <view class="category-arrow">
            <u-icon name="arrow-right" size="16" color="#ccc"></u-icon>
          </view>
        </view>
      </view>
    </view>

    <!-- 最近消息 -->
    <view class="recent-section">
      <view class="section-header">
        <text class="section-title">最近消息</text>
        <text class="view-all" @click="goToAllMessages">查看全部</text>
      </view>
      <view class="message-list">
        <view 
          v-for="message in recentMessages" 
          :key="message.id" 
          class="message-item"
          @click="goToMessageDetail(message)"
        >
          <view class="message-icon" :class="message.type">
            <u-icon :name="getMessageIcon(message.type)" size="18" color="white"></u-icon>
          </view>
          <view class="message-content">
            <view class="message-header">
              <text class="message-title">{{ message.title }}</text>
              <text class="message-time">{{ formatTime(message.createTime) }}</text>
            </view>
            <text class="message-desc">{{ message.content }}</text>
          </view>
          <view class="message-status" v-if="!message.isRead">
            <view class="unread-dot"></view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
/**
 * 消息通知页面
 * @author Wu.Liang
 * @date 2025-01-21
 * @version 1.0.0
 */

import { ref, reactive, onMounted } from 'vue'

// 通知设置
const settings = reactive({
  pushNotification: true,
  soundAlert: true,
  vibrationAlert: false
})

// 消息统计
const systemCount = ref(3)
const propertyCount = ref(5)
const paymentCount = ref(2)
const securityCount = ref(1)

// 最近消息
const recentMessages = ref([
  {
    id: 1,
    title: '系统维护通知',
    content: '系统将于今晚22:00-24:00进行维护升级，期间可能影响部分功能使用。',
    type: 'system',
    createTime: '2025-01-21 10:30:00',
    isRead: false
  },
  {
    id: 2,
    title: '物业费缴费提醒',
    content: '您的物业费将于3天后到期，请及时缴费以免影响服务。',
    type: 'payment',
    createTime: '2025-01-21 09:15:00',
    isRead: false
  },
  {
    id: 3,
    title: '访客登记通知',
    content: '有访客在门禁处登记，请及时确认是否允许进入。',
    type: 'security',
    createTime: '2025-01-21 08:45:00',
    isRead: true
  },
  {
    id: 4,
    title: '社区活动通知',
    content: '本周六将举办社区文化节活动，欢迎业主积极参与。',
    type: 'property',
    createTime: '2025-01-20 16:20:00',
    isRead: true
  }
])

// 设置变更处理
const onPushNotificationChange = (e) => {
  settings.pushNotification = e.detail.value
  saveSettings()
}

const onSoundAlertChange = (e) => {
  settings.soundAlert = e.detail.value
  saveSettings()
}

const onVibrationAlertChange = (e) => {
  settings.vibrationAlert = e.detail.value
  saveSettings()
}

// 保存设置
const saveSettings = () => {
  uni.setStorageSync('notificationSettings', settings)
  uni.showToast({
    title: '设置已保存',
    icon: 'success'
  })
}

// 获取消息图标
const getMessageIcon = (type) => {
  const iconMap = {
    system: 'setting',
    property: 'home',
    payment: 'rmb-circle',
    security: 'shield'
  }
  return iconMap[type] || 'bell'
}

// 格式化时间
const formatTime = (timeStr) => {
  const date = new Date(timeStr)
  const now = new Date()
  const diff = now - date
  
  if (diff < 60000) { // 1分钟内
    return '刚刚'
  } else if (diff < 3600000) { // 1小时内
    return Math.floor(diff / 60000) + '分钟前'
  } else if (diff < 86400000) { // 1天内
    return Math.floor(diff / 3600000) + '小时前'
  } else {
    return date.toLocaleDateString('zh-CN')
  }
}

// 页面跳转
const goToCategoryMessages = (category) => {
  uni.navigateTo({
    url: `/pages/profile/message-list?category=${category}`
  })
}

const goToAllMessages = () => {
  uni.navigateTo({
    url: '/pages/profile/message-list'
  })
}

const goToMessageDetail = (message) => {
  uni.navigateTo({
    url: `/pages/profile/message-detail?id=${message.id}`
  })
}

// 页面加载
onMounted(() => {
  loadSettings()
  loadMessages()
})

// 加载设置
const loadSettings = () => {
  const savedSettings = uni.getStorageSync('notificationSettings')
  if (savedSettings) {
    Object.assign(settings, savedSettings)
  }
}

// 加载消息
const loadMessages = () => {
  // 这里应该调用API加载消息数据
  console.log('加载消息数据')
}
</script>

<style lang="scss" scoped>
.notifications-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 0;
}



.settings-section,
.category-section,
.recent-section {
  background: white;
  margin: 15px;
  border-radius: 10px;
  padding: 20px;
  
  .section-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
  }
}

.setting-list {
  .setting-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0;
    border-bottom: 1px solid #f0f0f0;
    
    &:last-child {
      border-bottom: none;
    }
    
    .setting-info {
      flex: 1;
      
      .setting-title {
        display: block;
        font-size: 16px;
        color: #333;
        margin-bottom: 5px;
      }
      
      .setting-desc {
        display: block;
        font-size: 12px;
        color: #999;
      }
    }
  }
}

.category-list {
  .category-item {
    display: flex;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #f0f0f0;
    
    &:last-child {
      border-bottom: none;
    }
    
    &:active {
      background: #f8f9fa;
    }
    
    .category-icon {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 15px;
      
      &.system {
        background: #e3f2fd;
        color: #1976d2;
      }
      
      &.property {
        background: #e8f5e8;
        color: #388e3c;
      }
      
      &.payment {
        background: #fff3e0;
        color: #f57c00;
      }
      
      &.security {
        background: #fce4ec;
        color: #c2185b;
      }
      
      .iconfont {
        font-size: 20px;
      }
    }
    
    .category-info {
      flex: 1;
      
      .category-title {
        display: block;
        font-size: 16px;
        color: #333;
        margin-bottom: 3px;
      }
      
      .category-desc {
        display: block;
        font-size: 12px;
        color: #999;
      }
    }
    
    .category-arrow {
      .iconfont {
        font-size: 16px;
        color: #ccc;
      }
    }
  }
}

.recent-section {
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    
    .view-all {
      font-size: 14px;
      color: #2d8cf0;
    }
  }
  
  .message-list {
    .message-item {
      display: flex;
      align-items: flex-start;
      padding: 15px 0;
      border-bottom: 1px solid #f0f0f0;
      
      &:last-child {
        border-bottom: none;
      }
      
      &:active {
        background: #f8f9fa;
      }
      
      .message-icon {
        width: 40px;
        height: 40px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 15px;
        flex-shrink: 0;
        
        &.system {
          background: #e3f2fd;
          color: #1976d2;
        }
        
        &.property {
          background: #e8f5e8;
          color: #388e3c;
        }
        
        &.payment {
          background: #fff3e0;
          color: #f57c00;
        }
        
        &.security {
          background: #fce4ec;
          color: #c2185b;
        }
        
        .iconfont {
          font-size: 18px;
        }
      }
      
      .message-content {
        flex: 1;
        
        .message-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 5px;
          
          .message-title {
            font-size: 14px;
            color: #333;
            font-weight: 500;
          }
          
          .message-time {
            font-size: 12px;
            color: #999;
          }
        }
        
        .message-desc {
          font-size: 12px;
          color: #666;
          line-height: 1.4;
        }
      }
      
      .message-status {
        margin-left: 10px;
        flex-shrink: 0;
        
        .unread-dot {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: #ff4757;
        }
      }
    }
  }
}

// 响应式适配
@media screen and (max-width: 375px) {
  .settings-section,
  .category-section,
  .recent-section {
    margin: 10px;
    padding: 15px;
  }
}

@media screen and (min-width: 376px) and (max-width: 768px) {
  .settings-section,
  .category-section,
  .recent-section {
    margin: 15px;
    padding: 20px;
  }
}

@media screen and (min-width: 769px) {
  .notifications-page {
    max-width: 600px;
    margin: 0 auto;
  }
  
  .settings-section,
  .category-section,
  .recent-section {
    margin: 20px;
    padding: 25px;
  }
}
</style>
